<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
        <meta name="author" content="test">
        <meta name="description" content="test">
        <meta name="viewport" content="width=device-width;initial-scale=1.0">
        <title>form</title>
        <link rel="stylesheet" type="text/css" href="form.css" media="screen">

    </head>
    <body>
        <div id="container">
            <!-- 如果不需要html验证表单 则在form上增加novalidate属性即可 -->
            <form class="contact_form" action="" method="post" enctype="multipart/form-data">
                <ul>
                    <li>
                        <h2>联系我们</h2>
                        <span class="required_notification">*表示必填</span>
                    </li>
                    <li>
                        <label for="name">姓名:</label>
                        <!-- html5中提供的验证不一定能满足，可以增加pattern来增加一个正则表达式来验证，如:pattern="(http|https)://." -->
                        <input name="name" type="text" placeholder="Please input a name" required/>
                        <span class="form_hint">姓名不能为空</span>
                    </li>
                    <li>
                        <label for="email">电子邮件:</label>
                        <!-- html5支持新的type：email,验证时会自动根据email的形式验证-->
                        <input name="email" type="email" placeholder="Please input a email" required/>
                        <span class="form_hint">正确格式为:xxxx@example.com</span>
                    </li>
                    <li>
                        <label for="website">网站:</label>
                        <!-- html5支持新的type：url,验证时会自动根据url的形式验证-->
                        <input name="website" type="url" placeholder="http://www.xxx.com" required/>
                        <span class="form_hint">正确格式为:http://www.xxx.com</span>
                    </li>
                    <li>
                        <label for="message">留言:</label>
                        <textarea name="message" cols="40" rows="6"></textarea>
                    </li>
                    <li>
                        <button type="submit" class="submit">提交</button>
                    </li>
                </ul>
            </form>
        </div>
    </body>
</html>